<template>
	<div class="flexcenter">
		<div class="max_width paddingtb">
			<div class="flexleft flex_wrap">
				<div class="margin_bottom3 flexcenter" style="width: 25%;" v-for="item in list.data" @click="goGoodsInfo(item.id)">
					<div class="ffffff radius padding_bottom1">
						<img class="imgBox" :src="item.image_text" alt="">
						<div class="widthText text_f color_three word_wrap lianghang paddinglr15 margin_top1">
							{{item.name}}
						</div>
						<div class="color_red paddinglr15 margin_top1">
							<span class="text_bt">￥</span>
							<span class="text_ht">{{item.price}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="flexcenter margin_top" v-if="list.total > 12">
				<el-pagination background layout="prev, pager, next" :page-size="12" :total="list.total"
					@current-change="tuijianchange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import {getGoodsList} from "@/API/goods"
	export default {
		data() {
			return {
				page:1,
				list:{
					data:[]
				}
			}
		},
		created() {
			this.init()
		},
		methods:{
			init(page) {
				getGoodsList({
					page: page || 1,
				}).then(res => {
					this.list = res.data.data
					this.list.data = res.data.data.data;
				})
			},
			// 推荐页码改变调用接口
			tuijianchange(val) {
				this.init(val)
			},
			goGoodsInfo(id){ //商品详情
				this.$router.push({
					path:"/shopping/goodsInfo",
					query:{
						id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgBox {
		width: 267px;
		min-width: 267px;
		height: 266px;
		border-radius: 7px 7px 0px 0px;
	}

	.widthText {
		width: 267px;
	}
</style>